<template>
  <div id="detail">
    <DetailNavBar @detailNavclick="detailNavclick"
                  ref="detailNavBar"></DetailNavBar>
    <Scroll class="wrapper"
            ref="scroll"
            :probe-type="3" @scroll="scroll">
      <DetailSwiper :topImages="banner"></DetailSwiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detailInfo="detailInfo"></detail-goods-info>
      <detail-goods-params :goodsParams="goodsParams" ref="goodsParams"></detail-goods-params>
      <detail-comment-infos :rate="rate" ref="commentInfos"></detail-comment-infos>
      <detail-goods-recommend :recommends="recommends" ref="goodsRecmmend"></detail-goods-recommend>
    </Scroll>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
    <back-top @click.native="clickTop" v-show="show"></back-top>
  </div>
</template>

<script>
// 引入子组件
import DetailNavBar from "./ChildComps/DetailNavBar";
import DetailSwiper from "./ChildComps/DetailSwiper";
import DetailBaseInfo from "@/views/details/ChildComps/DetailBaseInfo";
import DetailShopInfo from "@/views/details/ChildComps/DetailShopInfo";
import DetailGoodsInfo from "@/views/details/ChildComps/DetailGoodsInfo";
import DetailGoodsParams from "@/views/details/ChildComps/DetailGoodsParams";
import DetailCommentInfos from "@/views/details/ChildComps/DetailCommentInfos";
import DetailGoodsRecommend from "@/views/details/ChildComps/DetailGoodsRecommend";
import DetailBottomBar from "@/views/details/ChildComps/DetailBottomBar";

// 引入公共组件
import Scroll from "@/components/common/scroll/Scroll";

// 引入网络请求方法
import {getDetail, getRecommend, Goods, GoodsParams, Shop} from "network/detail";

// 引入工具方法
import {backTopMixin, imgsLoadMixin} from "@/common/utils/mixins";

// vuex相关
import {mapActions} from 'vuex'
import {ADD_TO_CART} from "@/store/mutations-type";


export default {
  name: "GoodsDetail",
  mixins: [imgsLoadMixin, backTopMixin],
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailGoodsParams,
    DetailCommentInfos,
    DetailGoodsRecommend,
    DetailBottomBar,
    Scroll,
  },
  data() {
    return {
      iid: '1',
      banner: [],
      goods: {},
      shop: {},
      goodsParams: {},
      detailInfo: {},
      rate: {},
      recommends: [],
    }
  },
  created() {
    // 保存传入的id
    this.iid = this.$route.query.iid
    // this.iid = this.$route.params.iid
    // 获取商品数据
    this.getDetail()
    // 获取推荐数据
    this.getRecommend()
  },
  mounted() {

  },
  methods: {
    ...mapActions([ADD_TO_CART]),
    // 获取详情数据
    getDetail() {
      getDetail(this.iid).then(res => {
        const data = res.result
        // 请求轮播图信息
        this.banner = data.itemInfo.topImages
        // 获取商品信息
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        // 获取店铺信息
        this.shop = new Shop(data.shopInfo)
        // 卖家秀，尺码等信息
        this.detailInfo = data.detailInfo
        // 商品参数信息
        this.goodsParams = new GoodsParams(data.itemParams.info, data.itemParams.rule)
        // 商品评论信息
        this.rate = data.rate
      })
    },
    // 获取推荐数据
    getRecommend() {
      getRecommend().then(res => {
        this.recommends = res.data.list
      })
    },
    // ---内容与nav联动 start
    detailNavclick(index) {
      this.$refs.scroll.scrollTo(0, -this.offsetTops[index], 500)
    },
    scroll(position) {
      this.listenShow(position)
      // 内容与navbar的联动
      for (let i = 0; i < this.offsetTops.length; i++) {
        if (Math.floor(position.y) <= -this.offsetTops[i]) {
          this.$refs.detailNavBar.curIndex = i
        }
      }
    },
    getOffsetTops() {
      // 拿到组件的offsetTop
      this.offsetTops = [0]
      if (this.$refs.goodsParams)
        this.offsetTops.push(this.$refs.goodsParams.$el.offsetTop)
      if (this.$refs.commentInfos)
        this.offsetTops.push(this.$refs.commentInfos.$el.offsetTop)
      if (this.$refs.goodsRecmmend)
        this.offsetTops.push(this.$refs.goodsRecmmend.$el.offsetTop)
    },
    // ---内容与nav联动结束 end
    // 商品添加至购物车
    addToCart() {
      // 1. 收集商品数据
      const product = {}
      product.iid = this.iid
      product.desc = this.goods.desc
      product.title = this.goods.title
      product.img = this.banner[0]
      product.price = this.goods.realPrice

      // 2. 发送给vuex
      this.$store.dispatch('addToCart', product).then(res => {
        console.log(res)
        this.$toast.show('加入购物车成功',1000)
      })
    }
  },
}
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 999;
  background-color: #fff;
}

#detail .wrapper {
  overflow: hidden;
  /*height: 600px;*/
  height: calc(100vh - 104px);
}

</style>